Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <header id="myHeader" class="">
	<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 714.6 401.1">
  <path fill="#fff" fill-rule="evenodd" d="M502.8 0h211.8l-23 39.7-138.5 240L483 401H342.7L413 279.6 251.4 0h140.3L483 158.1 538.6 62 502.8 0Zm-201 279.6L140.1 0H0l231.7 401 70-121.4Z"/>
</svg>
	<nav>
		<a href="#vision">Vision</a>
		<a href="#knowledge">Knowledge</a>
		<a href="#space">Space</a>
		<a href="#future">Future</a>
		<button id="openmenu">
			<span></span>
			<span></span>
		</button>
	</nav>
</header>
<div id="page" class="">
	<section id="vision" style="background-image:url(https://assets.codepen.io/214624/vision.jpg)">
		<h1>Vision.</h1>
	</section>
	<section id="knowledge" style="background-image:url(https://assets.codepen.io/214624/knowledge.jpg)">
		<h1>Knowledge.</h1>
	</section>
	<section id="space" style="background-image:url(https://assets.codepen.io/214624/space.jpg)">
		<h1>Space.</h1>
	</section>
	<section id="future" style="background-image:url(https://assets.codepen.io/214624/future.jpg)">
		<h1>Future.</h1>
	</section>
</div>
<a id="fixedlink" target="_blank" rel="nofollow noopener" href="https://wyld.studio/">» See this solution in real usage</a>
    
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
	    line-height: 1.6;
    color: #fff;
		background: #000;
    font-size: 18px;
    font-weight: 400;
    font-family: "-apple-system", "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	
	&.stop {
		overflow: hidden;
	}
}

#page {
	position: relative;
	transition: 1s all ease-in-out;
	
	&.menuopen {
		opacity: .6;
		filter: blur(20px);
		transform: scale(1.2);
	}
}

section {
	display: flex;
	min-height: 100vh;
	padding: 50px;
	justify-content: center;
	align-items: center;
	background: #222;
	color: #fff;
	position: relative;
	
	&:after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		background: #000;
		opacity: .5;
		height: 100%;
		width: 100%;
	}
	
	h1 {
		font-size: 120px;
		margin: 0;
		z-index: 2;
		position: relative;
	}
}

header {
	z-index: 99999;
	position: relative;
	
	#logo {
		position: fixed;
		top: 30px;
		left: 0;
		right: 0;
		width: 100px;
		height: auto;
		margin: 0 auto;
		opacity: 1;
		transition: .3s all cubic-bezier(0.075, 0.82, 0.165, 1) .6s;
	}
	
	nav {
		display: flex;
		height: 100px;
		justify-content: center;
		align-items: center;
		padding: 0 20px;
		position: fixed;
		left: 0;
		right: 0;
		width: 500px;
		margin: 0 auto;
		top: 120px;
		background-color: rgba(255,255,255,.05);
		border-radius: 200px;
		z-index: 9;
		backdrop-filter: blur(5px);
		border: 1px solid rgba(255,255,255,.06);
		transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1) .2s;

a {
			color: #fff;
			text-decoration: none;
			font-weight: 700;
			display: block;
			padding: 10px 20px;
			line-height: 1;
			font-size: 15px;
			letter-spacing: 2px;
			text-transform: lowercase;
			transition: .3s all cubic-bezier(0.075, 0.82, 0.165, 1) .6s;

}
		
		button {
			-webkit-appearance: none;
			background: rgba(0,0,0,.3);
			backdrop-filter: blur(5px);
			border: 1px solid rgba(255,255,255,.1);
			position: absolute;
			z-index: 99;
			left: 0;
			margin: auto;
			right: 0;
			top: 0;
			bottom: 0;
			width: 60px;
			height: 60px;
			border-radius: 100%;
			outline: 0;
				border: 0;
			cursor: pointer;
								transition: .3s all cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s;
			transform: scale(0);

span {
				width: 40%;
				background: #fff;
				height: 2px;
				display: block;
				margin: 5px auto;
				transform: scalex(0);
				transition: .6s transform cubic-bezier(0.075, 0.82, 0.165, 1) 0s, .3s margin ease-in 0s;
			}
			
			&:hover {
				border-color: rgba(255,255,255,.5);
				
				span {
					margin: 10px auto;
				}
			}
		}
	}
}

header.sticky {
	#logo {
		top: 0;
		transform: scale(.8);
		opacity: 0;
		transition-delay: 0.5s;
	}
	nav {
		top: 20px;
		padding: 0;
		width: 90px;
		height: 90px;
		transition-delay: 0.5s;
		
		button {
			transform: scale(1);
			transition-delay: 0.6s;
			
			span {
				transform: scalex(1);
				transition: .6s transform cubic-bezier(0.075, 0.82, 0.165, 1) .8s, .3s margin ease-in 0s;
			}
		}
		
		a { 
			padding: 0;
			opacity: 0;
			letter-spacing: 0px;
			transform: scale(0.3);
			transition-delay: 0.2s;
		}
	}
}

#fixedlink {
	position: fixed;
	bottom: 0;
	z-index: 9999;
	right:0;
	left:0;
	text-align: center;
	text-decoration: none;
	color:#fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 20px;
}

console.log("Event Fired")
document.addEventListener('DOMContentLoaded', function() {
    var header = document.getElementById('myHeader');
	  var page = document.getElementById('page');
    var openMenuButton = document.getElementById('openmenu');

// Event listener to remove the sticky class when the button is clicked
    openMenuButton.addEventListener('click', function() {
        header.classList.remove('sticky');
				page.classList.add('menuopen');
    });
	
	var links = document.querySelectorAll('a[href^="#"]');

links.forEach(function(link) {
        link.addEventListener('click', function(event) {
            // Prevent the default action
            event.preventDefault();

// Get the target element
            var targetId = this.getAttribute('href');
            var targetElement = document.querySelector(targetId);

// Smooth scroll to target
            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    });
});

Frontend Forever App